<template>
	<view class="tradetotalFaceDevice">
		<view class="header">
			<view class="title_search">
				<u-search placeholder="搜索商户名称、商户UID" v-model="keyword" shape="square" @custom="getstatsl(true)"></u-search>
			</view>
			<picker mode="date" fields="month" @change="dateSel" :value="date" :end="endDate">
				<view class="title_date">
					<text>{{date}}</text>
					<image src="../../static/img/ic_pulldown.png"></image>
				</view>
			</picker>
		</view>
		<view class="content">
			<view v-if="statslList.length==0">
				<noData></noData>
			</view>
			<scroll-view class="content_list" v-else :scroll-y="true" @scrolltolower="getstatsl">
				<view class="list_item" v-for="(item,index) in statslList">
					<view class="item_top">
						<view class="item_top_title">
							<view class="title_name">F4 | {{item.id}}</view>
							<view class="title_status">达标</view>
						</view>
						<view class="item_top_con">
							<view>设备激活时间：2020.10.15</view>
							<view>绑定门店：曼玲粥蛇口分店(123456)</view>
						</view>
					</view>
					<view class="item_footer">
						<view class="item_footer_val">
							<view class="val_num">{{item.order_cnt}}</view>
							<view class="val_title">总笔数(笔)</view>
						</view>
						<view class="item_footer_val">
							<view class="val_num">{{item.order2_cnt}}</view>
							<view class="val_title">有效笔数(笔)</view>
						</view>
						<view class="item_footer_val">
							<view class="val_num">{{item.amount_cnt}}</view>
							<view class="val_title">总金额(元)</view>
						</view>
						<view class="item_footer_val">
							<view class="val_num">{{item.amount2_cnt}}</view>
							<view class="val_title">有效金额(元)</view>
						</view>
					</view>
				</view>
				<!-- <view class="list_item">
					<view class="item_top">
						<view class="item_top_title">
							<view class="title_name">F4 | F4123456789012</view>
							<view class="title_status">达标</view>
						</view>
						<view class="item_top_con">
							<view>设备激活时间：2020.10.15</view>
							<view>绑定门店：曼玲粥蛇口分店(123456)</view>
						</view>
					</view>
					<view class="item_footer">
						<view class="item_footer_val">
							<view class="val_num">12</view>
							<view class="val_title">总笔数(笔)</view>
						</view>
						<view class="item_footer_val">
							<view class="val_num">12</view>
							<view class="val_title">有效笔数(笔)</view>
						</view>
						<view class="item_footer_val">
							<view class="val_num">12</view>
							<view class="val_title">总金额(元)</view>
						</view>
						<view class="item_footer_val">
							<view class="val_num">12</view>
							<view class="val_title">有效金额(元)</view>
						</view>
					</view>
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { statsl } from '../../api/index.js'
	import noData from '../../components/data/nodata.vue'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				endDate: currentDate,
				keyword:'',
				page:1,
				limit:20,
				statslList:[{
				  "uid": "1046086",
				  "suid": "895622",
				  "shop_name": "面包店",
				  "id": "QCF420190720053641",
				  "device_type": "69",
				  "order_cnt": 1,
				  "order2_cnt": 0,
				  "amount_cnt": 0.01,
				  "amount2_cnt": 0,
				  "uv2": 1,
				  "series_name": "蜻蜓F4"
				}],
				isLoad:false,//判断之前的请求是否还未结束
				isAll:false,//判断是否加载了全部数据
			}
		},
		onLoad:function(){
			this.getstatsl(true)
			console.log(this.date)
		},
		methods: {
			dateSel(e){
				this.date = e.detail.value
				this.getstatsl(true)
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    return `${year}-${month}`;
			},
			//获取我的商户列表
			async getstatsl(isSw){
				if(isSw){ //如果是加载第一页
					this.isAll = false;
					this.isLoad = false;
					this.page = 1;
				}else{ //如果是列表加载逻辑
					if(this.isLoad || this.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
						console.log("请求未完成或者列表数据已经全部加载完毕")
						return ;
					}
					this.isLoad = true;
				}
				
				let data = await statsl({
					time: this.date,
					page: this.page,
					limit: this.limit,
					search: this.keyword
				})
				console.log(data)
				if(isSw === true){//判断是否重新加载数据
					this.statslList = data.data;
				}else{
					this.statslList = this.statslList.concat(data.data);
				}
				
				this.page += 1;
				this.isLoad = false;
				if(data.data.length < this.limit){
					this.isAll = true;
				}
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../faceDeviceSet/faceDeviceSet'
			});
		},
		components:{
			noData
		}
	}
</script>

<style lang="scss" scoped>
	.tradetotalFaceDevice{
		height: 100%;
		background-color: #F5F5F5;
		position: relative;
		.header{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;
			white-space: nowrap;
			.title_search{
				
			}
			.title_date{
				image{
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
		.content{
			padding: 100rpx 30rpx 0 30rpx;
			height: 100%;
			.content_list{
				height: 100%;
				.list_item{
					background-color: #FFFFFF;
					border-radius: 6rpx;
					padding: 20rpx 30rpx;
					margin-top: 30rpx;
					.item_top{
						padding-bottom: 20rpx;
						.item_top_title{
							display: flex;
							justify-content: space-between;
							.title_name{
								font-size: $uni-font-size-big;
							}
						}
						.item_top_con{
							font-size: $uni-font-size-sm;
							color: #999999;
							line-height: 40rpx;
						}
					}
					.item_footer{
						display: flex;
						justify-content: space-around;
						padding: 40rpx 0 10rpx 0;
						border-top: 1rpx solid #F5F5F5;
						.item_footer_val{
							.val_num{
								text-align: center;
								font-size: $uni-font-size-big;
							}
							.val_title{
								color: #999999;
								font-size: $uni-font-size-sm;
							}
						}
					}
				}
			}
		}
	}
</style>
